<template>
  <div id="app">
    <div class="header">
      <div class="warp clearfix">
        <a href="http://www.xilongfx.com/" class="logo"><img src="../static/img/logo.png" alt=""></a>
        <div class="nav-view-left">
          <div class="nav-view-left-text">
            <i class="i-img-icon"></i>
            <span>全站导航</span>
          </div>
          <ul class="nav-list">
            <li><a href="http://www.xilongfx.com">首页</a></li>
            <li><a href="http://www.xilongfx.com/clzx">观点</a></li>
            <li><a href="http://www.xilongfx.com/newvideo">视频</a></li>
            <li><a href="http://www.xilongfx.com/private_tutor">私信</a></li>
            <li><a href="http://www.xilongfx.com/hama">蛤蟆线</a></li>
            <li><a href="http://www.xilongfx.com/course">高级培训班</a></li>
            <li><a href="http://www.xilongfx.com/zsdl">招商代理</a></li>
            <li><a href="http://www.xilongfx.com/about">关于熙隆</a></li>
            <!--<li><a href="javascript:;" @click="$message('暂未开放,敬请期待')">赚钱指南</a></li>-->
            <!--<li><a href="javascript:;" @click="$message('暂未开放,敬请期待')">招商加盟</a></li>-->
          </ul>
        </div>
        <div class="user">
          <ul class="user-nav-list">
            <li><a target="_blank" href="http://www.xilongfx.com/vipcard">开通VIP </a></li>
            <li @click="showPay()"><a href="javascript:;">充值</a></li>
            <!--<li @click="showOpenVip()"><a href="http://www.xilongfx.com/vipcard">开通VIP </a></li>-->
            <li @click="showPointsMoney()"><a href="javascript:;">积分赚钱</a></li>
            <li @click="showClassSchedule()"><a href="javascript:;">课程安排 </a></li>
            <li @click="showImgLibrary()"><a href="javascript:;">图文库</a></li>
          </ul>
          <a class="z-contact" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143329170&amp;site=qq&amp;menu=yes">联系客服</a>
          <div class="user-info" v-if="user.if_login === 1">
            <a href="http://www.xilongfx.com/user" class="userPint"><img :src="user.pint"></a>
            <span class="zuanshiCard cardStyle" v-if="user.vip_type === 5">年卡会员</span>
            <span class="tyCard cardStyle" v-else-if="user.vip_type === 1">体验卡会员</span>
            <span class="moneyCard cardStyle" v-else-if="user.vip_type === 3">月卡会员</span>
            <span class="yearCard cardStyle" v-else-if="user.vip_type === 4">季卡会员</span>
            <span class="ptCard cardStyle" v-else-if="user.vip_type === 0">普通会员</span>
            <span class="time" v-if="user.vip_end_time">有效期：{{user.vip_end_time}}</span>
            <a href="javascript:;" @click="loginOut">退出</a>
          </div>

          <div class="user-info-sign" v-else>
            <a href="javascript:;" class="sign-in" @click="$refs.login.show(2)">登录</a>
            <a href="javascript:;" @click="$refs.login.show(0)">注册</a>
          </div>
        </div>
        <div class="nav-view-lefts">
          <div class="nav-view-left-text">
            <i class="i-img-icon"></i>
            <span>直播间导航</span>
          </div>
          <ul class="nav-list">
            <li @click="showPay()"><a href="javascript:;">充值</a></li>
            <li><a target="_blank" href="http://www.xilongfx.com/vipcard">开通VIP </a></li>
            <li @click="showPointsMoney()"><a href="javascript:;">积分赚钱</a></li>
            <li @click="showClassSchedule()"><a href="javascript:;">课程安排 </a></li>
            <li @click="showImgLibrary()"><a href="javascript:;">图文库</a></li>
          </ul>
        </div>
        <div class="tabLiveTitle">
          <div class="tabLiveTitle-text">
            <i class="i-img-icon"></i>
            <span>切换直播间</span>
            <i class="i-img-san"></i>
          </div>
          <ul class="nav-list">
            <li><a href="/xltv2">XLTV2  期货原油</a></li>
            <li><a href="/xltv3">XLTV3  黄金T+D</a></li>
            <li><a href="/xltv4">XLTV4  VIP专享</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="container">
      <div class="mainbody" :class="{mainbody2: showSlideBar}">
        <div class="mainbody-con" :class="{on:live_box_btn_active}">
          <div class="mainbody-view">
            <div class="live-box">
              <div id="live" v-if="LookBool">
                <span v-show="videoType=='VV'" id="_vl_video_component" :pn="vvCode" ls="v20" bt="1"
                  lg="http://img.xilongfx.com/logo.png" ld="/static/350x350.swf" nl="/static/170x170.swf">
                </span>
                <!--http://yy.com/s/38212803/38212803/yyscene.swf-->
                <embed
                  v-if="videoType=='YY'"
                  :src="YYnum"
                  height="100%"
                  align="middle"
                  width="100%"
                  autostart="true"
                  type="application/x-shockwave-flash"
                  wmode="opaque"
                  allowfullscreen="true"
                  allowscriptaccess="always"
                  quality="high"
                  allowFullScreenInteractive="true"
                >
              </div>
            </div>
          </div>
          <div class="mainbody-class-schedule">
            <div class="class-schedule-title">
              <h3>今日课程安排</h3>
              <a @click="showClassSchedule()" href="javascript:;">七日课程安排 >></a>
              <p @click="subscriptionList()"><i></i>直播订阅</p>
            </div>
            <div class="swiper-view">
              <div class="button-prev-z" @click="swiper.slidePrev()">
              </div>
              <div class="button-next-z" @click="swiper.slideNext()">
              </div>
              <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="item in now_class_list">
                  <div class="class-schedule-item"
                       :class="{is_active:item.if_line===2,end_active:item.if_line===1}">
                    <p class="text">
                      <em><i class="down-icon" v-if="item.download"></i>{{item.title}}</em>
                    </p>
                    <span class="dots"></span>
                    <div class="time">
                      <em>{{item.begin_time}}-{{item.end_time}}</em>
                      <a class="download-class" :href="item.download?item.download:'javascript:;'">{{item.download?'下载课件':'暂无课件下载'}}</a>
                    </div>
                  </div>
                </swiper-slide>
              </swiper>
            </div>


          </div>
        </div>
      </div>
      <div class="chat-room">

        <div class="chat-block" :class="{hideBanner: !banner.visible}">
          <div class="chat-head-teacher-view">
            <p @click="bannerBtn"
               :class="{on:!banner.visible}" class="upAndTop">
              <i></i>{{banner.visible?'隐藏':'显示'}}</p>
            <h3><span>{{classInfo.title}}</span><span>牛人：{{classInfo.coffee_name}}</span></h3>
            <el-carousel arrow="hover" trigger="click" :interval="5000">
              <el-carousel-item v-for="item in gangugaoImg">
                <img :src="item.photo" :title="item.title" @click="gotoGuangG(item.url)" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="chat-head" :class="{chatGoRight: showUserList}">
            <ul class="chat-nav">
              <li @click="showUserList = 0" :class="{active: showUserList===0}">
                讨论区（{{look_false_count}}）
              </li>
              <li @click="showUser3" :class="{active: showUserList===3,'redPoint':redPointBool}">
                今日观点（{{today_counsel_counts>=99?'99+':today_counsel_counts}}）
              </li>
              <li @click="showUserList = 1" :class="{active: showUserList===1}" v-if="Number(user.role)===1">用户列表</li>
              <li @click="showUserList = 2" :class="{active: showUserList===2}" v-if="Number(user.role)===1">临时用户</li>
            </ul>

            <div class="unblock-gossip">
              <a href="javascript:;" @click="all_unblock_gossip" v-if="user.role===1"
                 v-show="showUserList===0">取消所有单个禁言</a>
            </div>
          </div>

          <div class="chat-announcement" v-show="showUserList===0&&announcement_list.length!=0&&gonggaoBool"
               :class="{on:announcement_top_active}">
            <div class="chat-announcement-text">
              <marquee direction="left" behavior="scroll" onmouseout="this.start()" onmouseover="this.stop()" >
                <p v-for="(chat, index) in announcement_list" v-if="chat.status==0&&chat.target!=2">{{chat.content}}</p>
              </marquee>
              <i :class="{on:announcement_top_active}" @click="announcement_top_active=!announcement_top_active"></i>
            </div>
          </div>
          <!--userVip1体验卡,userVip2黄金,userVip3白金,userVip4钻石-->
          <div class="login-message" v-for="(chat, index) in login_message_list"
               :class="{on:chat.show}">
            <div class="dialogue-join" :class="{vipx:Number(chat.if_vip)===1}">
              <strong class="name">{{chat.name}} </strong>欢迎来到直播间~
            </div>
          </div>

          <div class="chat-cont" :class="{bottom0: showUserList===3}" >
            <div class="chat-item" v-show="showUserList===0" ref="chatList">
              <ul class="chat-list" id="chatPanel">
                <!--userVip1体验卡,userVip2黄金,userVip3白金,userVip4钻石-->
                <li v-for="(chat, index) in chatList"
                    v-show="Number(chat.show) !== 2 || chat.visitor_id == user.visitor_id || user.group == 'customer'"
                    :class="{giftItem: chat.gift, userVip1:Number(chat.vip_type)===1,userVip2:Number(chat.vip_type)===3,userVip3:Number(chat.vip_type)===4,userVip4:Number(chat.vip_type)===5, userLv1: chat.role == '0', userKf: chat.role == '1', dialogueMine: chat.visitor_id == user.visitor_id && chat.type == 'publish' && !chat.gift, dialogueJoin: chat.type == 'login'}">
                  <template v-if="chat.type == 'login'">
                    <div class="dialogue-join vip-x" v-if="Number(chat.if_vip)===1">
                      <i class="bells"></i>
                      <strong class="name">{{chat.name}} </strong>欢迎来到直播间~
                      <span class="triangle"></span>
                    </div>
                    <div class="dialogue-join" v-else>
                      <i class="bells"></i>
                      <strong class="name">{{chat.name}}</strong>欢迎来到直播间~
                      <span class="triangle"></span>
                    </div>
                  </template>
                  <template v-else-if="chat.gift">
                    <div class="dialogue-gift">
                      {{chat.name}}送了一个礼物 <img :src="chat.gift">
                    </div>
                  </template>
                  <template v-else-if="chat.msg_type&&chat.msg_type!=undefined">
                    <div class="celieinfoBox"
                         @click="((chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4)?'':gotoGuanD(chat.counsel_id)"
                         :class="{seeOpenVip:(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4,'newclDiv':chat.counsel_type==1,'zhuizongDiv':chat.counsel_type==2,'profitDiv':chat.counsel_type==3}">
                      <div class="celieTop">
                        <img :src="chat.face"/>
                        <div class="dakaInfo">
                          <p class="dakaname">{{chat.coffee_name}}</p>
                          <p class="dakatime">{{chat.time}}</p>
                        </div>
                        <i :class="{'newcl':chat.counsel_type==1,'zhuizong':chat.counsel_type==2,'profit':chat.counsel_type==3}"></i>
                      </div>
                      <div class="celieottom">
                        <div v-if="chat.counsel_type==1" class="newclBox">
                          <div>
                            <p>{{chat.breed_name}}</p>
                            <p>品种</p>
                          </div>
                          <div>
                            <p>{{chat.direction_name}}</p>
                            <p>方向</p>
                          </div>
                          <div>
                            <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.admission_point}}</p>
                            <p>入场点</p>
                          </div>
                          <div>
                            <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.target_point}}</p>
                            <p>目标点</p>
                          </div>
                          <div>
                            <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.stop_loss_point}}</p>
                            <p>止损点</p>
                          </div>
                        </div>
                        <div v-if="chat.counsel_type==2">
                          <div class="newclBox">
                            <div>
                              <p>{{chat.breed_name}}</p>
                              <p>品种</p>
                            </div>
                            <div>
                              <p>{{chat.direction_name}}</p>
                              <p>方向</p>
                            </div>
                            <div>
                              <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.admission_point}}</p>
                              <p>入场点</p>
                            </div>
                            <div>
                              <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.target_point}}</p>
                              <p>目标点</p>
                            </div>
                            <div>
                              <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.stop_loss_point}}</p>
                              <p>止损点</p>
                            </div>
                          </div>
                          <div class="trackBox">{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.tracking}}</div>
                        </div>
                        <div v-if="chat.counsel_type==3" class="newclBox">
                          <div>
                            <p>{{chat.breed_name}}</p>
                            <p>品种</p>
                          </div>
                          <div>
                            <p>{{chat.direction_name}}</p>
                            <p>方向</p>
                          </div>
                          <div>
                            <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.admission_point}}</p>
                            <p>入场点</p>
                          </div>
                          <div>
                            <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.target_point}}</p>
                            <p>目标点</p>
                          </div>
                          <div>
                            <p>{{(chat.view_type==2&&user.if_login!=1)||(chat.view_type==3&&user.if_counsel_vip!=1)||chat.view_type==4?'*****':chat.stop_loss_point}}</p>
                            <p>止损点</p>
                          </div>
                        </div>
                      </div>
                      <p class="wenxinTS">温馨提示：策略仅供参考，不作投资依据</p>
                      <div class="noseeBg">
                        <a class="openVIPbtn" v-if="chat.view_type==3" href="http://www.xilongfx.com/vipcard">开通VIP查看</a>
                        <a class="openVIPbtn" v-if="chat.view_type==4" href="http://www.xilongfx.com/prompt">转正后查看</a>
                        <a class="loginyhbtn" v-if="chat.view_type==2" @click="$refs.login.show(2)">登录后解锁</a>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="avatar-img">
                      <template v-if="chat.visitor_id != user.visitor_id">
                        <Poptip placement="bottom" trigger="hover" class="trigger-view">
                          <img :src="chat.face"
                               :onerror="errorImg01" alt="">
                          <div class="dialogue-btn" slot="content">
                            <a href="javascript:;" class="trigger-view-list" v-if="user.role===10000&&chat.username">{{chat.username}}</a>
                            <a href="javascript:;" class="trigger-view-list" @click="atUser(chat.name)">@TA</a>
                            <a href="javascript:;" class="trigger-view-list" v-if="user.role===1"
                               @click="all_gossip_users(chat.visitor_id,1)">禁言</a>
                          </div>
                        </Poptip>
                      </template>
                      <template v-else>
                        <img :src="chat.face" :onerror="errorImg01" alt="">
                      </template>
                    </div>

                    <div class="right-content"> <!--正常消息-->
                      <div class="chat-content-text">
                        <div class="dialogue-name clearfix">
                          <em>{{chat.name}}</em>
                          <span>{{chat.date}}</span>
                        </div>

                        <div class="dialogue-con" v-if="!chat.p_name"><!--正常消息-->
                          <template v-if="chat.image">
                            <div class="dialogue-txt cur-zoom" @click="$refs.fullImg.show(chat.image)"><img
                              :src="chat.image"></div>
                          </template>
                          <template v-else>
                            <div class="dialogue-txt" v-html="chat.content"></div>
                          </template>
                        </div>

                        <div class="dialogue-con" v-else> <!--回复的消息-->
                          <div class="reply-txt">
                            <p v-html="chat.p_content"></p>
                          </div>
                          <template v-if="chat.image">
                            <div class="dialogue-txt cur-zoom" @click="$refs.fullImg.show(chat.image)"><img
                              :src="chat.image"></div>
                          </template>
                          <template v-else>
                            <div class="reply-name"><em>{{chat.name}}</em>：回复<em>{{chat.p_name}}</em></div>
                            <div class="dialogue-txt" v-html="chat.content"></div>
                          </template>
                        </div>

                      </div>
                      <div class="dialogue-tool" v-if="user.group == 'customer'">
                        <span class="delete" @click="checkChat(chat, 'N')"><i></i>删除</span>
                        <span class="verify" v-if="Number(chat.show) === 2"
                              @click="checkChat(chat,'Y')"><i></i>通过</span>
                        <span class="reply" @click="reply_user(chat.chat_id,chat.name)"
                              v-if="user.role===1&&!chat.image&&chat.role != '1'"><i></i>回复</span>
                        <span class="upload" v-if="chat.image"
                              @click="addImgList(chat.image.replace('http://img.xilongfx.com/', ''))">保存到图文库</span>
                      </div>
                    </div>
                  </template>
                </li>
              </ul>
              <div class="privateDiv" @click="$refs.privateChatPower.initialPage(privateData)" v-if="privateData.status==1">
                <div class="bgCircle"></div>
                <i class="noReaderNum" v-if="privateData.count!=0" :class="privateData.count>99?'greater99':'less99'">{{privateData.count>99?'99+':privateData.count}}</i>
                <img src="./assets/img/private/tips01.png" class="privateBtn"/>
              </div>
              <el-popover
                popper-class="qrCodeStart"
                ref="qrCode"
                width="150"
                v-model="qrCodVisible"
              >
                <i @click="qrCodVisible=false"></i>
                <div class="qrCodeBox">
                  <p>微信扫一扫<br>手机继续看直播</p>
                  <div><img src="../static/img/weixin.png"></div>
                </div>
              </el-popover>
              <div class="qrCode" v-popover:qrCode></div>
              <el-popover
                ref="chatFigt"
                popper-class="topStart"
                width="276"
                v-model="GiftVisible"
              >
                <div class="gift-block">
                  <div class="gift-block-title">
                    请选择打赏礼物
                    <i @click="GiftVisible=false"></i>
                  </div>
                  <ul class="gift-list clearfix">
                    <li v-for="gift in giftInfo.list">
                      <div class="gift-bor" :class="{active: giftInfo.active === gift.id}"
                           @click="giftInfo.active = gift.id">
                        <img
                          :src="gift.file"
                        >
                        <span class="name">{{gift.name}}</span>
                      </div>
                      <p>{{gift.price}}熙币</p>
                    </li>
                  </ul>
                  <div class="select-gift-type">
                    <el-radio class="radio" v-model="select_gift_type" label="1">送老师</el-radio>
                    <el-radio class="radio" v-model="select_gift_type" label="2">送客服</el-radio>
                  </div>
                  <div class="recharge">
                    <button @click="sendGift()">打赏</button>
                  </div>
                </div>
              </el-popover>
              <div v-popover:chatFigt class="chatFigt" title="选择打赏礼物"></div>
            </div>
            <div class="chat-item" v-show="showUserList===1">
              <div class="chat-item-title clearfix 666">
                <p class="z-xian">在线用户：<em>{{chat_user_num_z}}</em></p>
                <div class="chat-item-title-right">
                  <span class="y-gossip" v-if="z_gossip_active" @click="user_get_y_gossip_user(1)">已被禁言用户</span>
                  <span class="y-gossip" v-else @click="user_get_y_gossip_user(1)">全部用户</span>
                </div>
              </div>
              <div slot="content">
                <ul class="users normal-users">
                  <!--userVip1体验卡,userVip2黄金,userVip3白金,userVip4钻石-->
                  <li :class="{userLv1: true, userVip1:Number(val.vip_type)===1,userVip2:Number(val.vip_type)===3,userVip3:Number(val.vip_type)===4,userVip4:Number(val.vip_type)===5}" v-for="(val, key) in users">
                    <div class="avatar-img">
                      <img src="../static/img/avator_img.png" alt="">
                      <div class="img-pos-view">
                        <em @click="atUser(val.nickname)">@TA</em>
                        <em v-show="Number(val.if_speak)===1" @click="gossip_users(val.visitor_id,1)">禁言</em>
                        <em v-show="Number(val.if_speak)===2" @click="unblock_gossip(val.visitor_id,1)">取消禁言</em>
                      </div>
                    </div>
                    <p>{{val.nickname}}</p>
                    <span class="y-gossip-icon" v-if="Number(val.if_speak)===2">已禁言</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="chat-item" v-show="showUserList===2">
              <div class="chat-item-title clearfix 666">
                <p class="z-xian">临时会员：<em>{{chat_visitor_num_z}}</em></p>
                <div class="chat-item-title-right">
                  <span class="y-gossip" v-if="y_gossip_active" @click="other_get_y_gossip_user(1)">已被禁言用户</span>
                  <span class="y-gossip" v-else @click="other_get_y_gossip_user(1)">全部用户</span>
                </div>
              </div>
              <ul class="users normal-users">
                <!--userVip1体验卡,userVip2黄金,userVip3白金,userVip4钻石-->
                <li :class="{userLv1: true, userVip1:Number(val.vip_type)===1,userVip2:Number(val.vip_type)===3,userVip3:Number(val.vip_type)===4,userVip4:Number(val.vip_type)===5}" v-for="(val, key) in temporary_users">
                  <div class="avatar-img">
                    <img src="../static/img/avator_img.png" alt="">
                    <div class="img-pos-view">
                      <em @click="atUser(val.nickname)">@TA</em>
                      <em v-show="Number(val.if_speak)===1" @click="gossip_users(val.visitor_id,2)">禁言</em>
                      <em v-show="Number(val.if_speak)===2" @click="unblock_gossip(val.visitor_id,2)">取消禁言</em>
                    </div>
                  </div>
                  <p>{{val.nickname}}</p>
                  <span class="y-gossip-icon" v-if="Number(val.if_speak)===2">已禁言</span>
                </li>
              </ul>
            </div>
            <div class="chat-celue" v-show="showUserList===3">
              <div class="chat-celue-top">
                <span class="chat-celue-top-time"><i></i>{{dataStrategys.date}}</span>
                <a href="http://www.xilongfx.com/clzx/" target="_blank">进入观点中心>></a>
                <span class="chat-celue-top-push" @click="pushShow" >{{dataStrategys.if_follow&&dataStrategys.if_vip?'查看推送牛人':'VIP微信推送'}}</span>
              </div>
              <div class="screening">
                <div class="screeningDaka clearfix">
                  <span>牛人:</span>
                  <ul>
                    <li v-for="(item,dakaindex) in dataStrategys.coffee_data" :class="{'active':dakaALL === dakaindex}" @click="giveStrategy(item.id,breed_id,dakaindex,varietiesAll)">{{item.name}}</li>
                  </ul>
                </div>
                <div class="screeningVarieties clearfix">
                  <span>品种:</span>
                  <ul :class="Ulmax?'height88':'height30'">
                    <li v-for="(item,varietiesindex) in dataStrategys.coffee_breed" :class="{'active':varietiesAll === varietiesindex}" @click="giveStrategy(dakaUser_id,item.id,dakaALL,varietiesindex)">{{item.name}}</li>
                  </ul>
                  <a @click="Ulmax=!Ulmax" :class="{up:Ulmax}" v-if="pinzhongLen > 6">更多</a>
                </div>
              </div>
              <p class="clearfix strategyTitle">
                <span style="width:72px;margin-left: 10px">时间</span>
                <span style="width:82px">牛人</span>
                <span style="width:72px">品种</span>
                <span style="width:40px">方向</span>
                <span style="width:74px">入场点</span>
                <span style="width:57px">目标点</span>
                <span style="width:57px">止损点</span>
                <span style="width:51px">状态</span>
                <span style="width:57px;line-height: 17px;"><i>盈亏</i><i>状态</i></span>
                <span style="width:47px">追踪</span>
              </p>
              <div class="strategyData" :class="Ulmax&&dakaNumBool?'top251':!(Ulmax||dakaNumBool)?'top193':'top204'" ref="ScrollBox" @scroll="getScroll">
                <ul class="strategyUl" ref="strategyUlBox" v-if="counsel_listHave">
                  <li v-for="(detail,index) in dataStrategys.counsel_list.data" class="strategyLi">
                    <div class="strategyBoxs"
                         @click="detail.is_lock || detail.trackingCount==='0'?'':showTrack(index,detail.is_click)"
                         :class="{'uptrackAfter':detail.is_click,'NoVIPsee':detail.is_lock,'VIPsee':!detail.is_lock&&!detail.is_vip_free,'hastracking':detail.trackingCount!=='0'}">
                      <span style="width:72px;margin-left: 10px" :class="{'font12':detail.date.length > 5}">{{detail.date}}</span>
                      <span style="width:82px">{{detail.name}}</span>
                      <span style="width:72px">{{detail.counsel_breed}}</span>
                      <span style="width:40px" :class="detail.is_lock?'':detail.direction==='2'?'shortColor':'doMoreColor'">
                        {{detail.is_lock?detail.direction:detail.direction==='2'?'做空':'做多'}}
                      </span>
                      <span style="width:74px">{{detail.admission_point}}</span>
                      <span style="width:57px">{{detail.target_point}}</span>
                      <span style="width:57px">{{detail.stop_loss_point}}</span>
                      <span style="width:51px" :class="detail.position_type==='1'?'notOpenColor':detail.position_type==='2'?'doMoreColor':detail.position_type==='3'?'liquidatedColor':''">
                        {{detail.is_lock?detail.position_type:detail.position_type==='1'?'未开仓':detail.position_type==='2'?'持仓中':'已平仓'}}
                      </span>
                      <span style="width:55px">
                        <i :class="detail.profit_loss_status==='1'?'surplusColor':detail.profit_loss_status==='2'?'lossColor':detail.profit_loss_status==='3'?'cancelColor':detail.profit_loss_status==='4'?'insurance':''">
                         {{detail.is_lock?detail.profit_loss_status:detail.profit_loss_status==='0'?'':detail.profit_loss_status==='1'?'盈利':detail.profit_loss_status==='2'?'亏损':detail.profit_loss_status==='3'?'取消':detail.profit_loss_status==='4'?'平保':''}}
                        </i>
                      </span>
                      <span style="width:47px" :class="{'trackingNew':detail.ifHaveNewTracking}">{{detail.trackingCount}}</span>
                      <a class="gotoVIP" v-if="detail.show_vip==1" href="javascript:;" @click.stop="gotoOpenVIP(1)">转正即可查看</a>
                      <a class="gotoVIP" v-if="detail.show_vip==2" href="javascript:;" @click.stop="gotoOpenVIP(2)">开通VIP即可查看</a>
                      <a class="gotoVIP" v-if="detail.show_vip==3" href="javascript:;" @click.stop="gotoOpenVIP(3)">登录即可查看</a>
                    </div>
                    <div class="trackInfo" v-if="detail.is_click">
                      <p class="trackInfoTitle">
                        <span class="trackInfoTitleOne">盈亏统计： <i :class="detail.profit_loss_status==='1'?'shortColor':detail.profit_loss_status==='2'?'doMoreColor':''">{{detail.profit_loss_count}}</i></span>
                        <span class="trackInfoTitleTwo">平仓价格： <i>{{detail.liquidation_price}}</i></span>
                        <span class="trackInfoTitle3" @click.stop="detail.track_img ===''?$message('暂无图片'):$refs.fullImg.show(detail.track_img)">查看追踪图</span>
                        <span class="trackInfoTitle4" @click.stop="detail.forecast_img ===''?$message('暂无图片'):$refs.fullImg.show(detail.forecast_img)">查看预测图</span>
                      </p>
                      <ul>
                        <li v-for="item in detail.tracking_list" :class="{'nologin':user.if_login !==1}" v-if="detail.trackingCount!=='0'">
                          <i :class="{'newsI':item.is_new}"></i>
                          <span class="trackTime" :class="{'tracknewsFont':item.is_new}">{{item.create_time}}</span>
                          <span class="trackFont" :class="{'tracknews':item.is_new,'noseetrack':user.if_login !==1}">{{item.tracking}}</span>
                          <a href="javascript:;" @click="$refs.login.show(2)">登录后解锁</a>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
                <img src="../static/img/queshenye_icon.png" class="queshen" v-else />
              </div>
            </div>
          </div>
          <div class="chat-bottom" v-if="showUserList!==3">
            <div class="chat-tool">
              <el-popover
                ref="roomFace"
                placement="top-start"
                width="365"
                v-model="faceVisible">
                <ul class="face-panel">
                  <li v-for="(value, key) in faceList" @click="chooseFace(key)"><img
                    :src="value" :title="key"></li>
                </ul>
              </el-popover>
              <a href="javascript:;" v-popover:roomFace class="chat-face" title="表情符号"></a>
              <template v-if="user.group == 'customer'">
                <Poptip placement="top" class="chatImgTip">
                  <a href="javascript:;" class="chat-img" title="选择图片"></a>
                  <div slot="content">
                    <a href="javascript:;" @click="imgListVisible = true">发送图文库图片</a>
                    <el-upload
                      class="avatar-uploader"
                      action="http://up-z2.qiniu.com"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :data="form">
                      <a href="javascript:;">发送本地图片</a>
                    </el-upload>
                  </div>
                </Poptip>
              </template>
              <template v-else>
                <el-upload
                  class="avatar-uploader"
                  action="http://up-z2.qiniu.com"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :data="form"
                  style="float: left;">
                  <a href="javascript:;" class="chat-img" title="选择图片"></a>
                </el-upload>
              </template>
              <a href="javascript:;" class="chat-scroll" :class="{on: chatScroll}"
                 @click="chatScroll = !chatScroll" title="滚屏"></a>
              <a href="javascript:;" class="chat-clear" @click="chatList.splice(0)" title="清屏"></a>
              <a class="antswith">
                <el-switch
                  v-model="switchvalue"
                  @change="changeswitch()"
                  on-value="1"
                  off-value="0"
                  on-text="动画开"
                  on-color="#7182c0"
                  off-color="#7182c0"
                  off-text="动画关">
                </el-switch>
              </a>
              <a target="_blank" v-if="user.role!==1" href="http://wpa.qq.com/msgrd?v=3&amp;uin=3143329170&amp;site=qq&amp;menu=yes"
                 class="chat-phone-k" title="联系客服"><i></i>联系客服</a>
              <div class="chat-share"><i></i>分享
                <div class="shareBox">
                  <div class="shareWXBox">
                    <p class="shareWX">分享到微信</p>
                    <p class="shareWXInfo">分享给微信好友或朋友圈</p>
                    <div class="ermBox">
                      <img src="../static/img/live1.png">
                    </div>
                  </div>
                  <div class="shareOtherBox">
                    <div class="bdsharebuttonbox">
                      <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到QQ新浪微博"></a>
                      <a href="#" class="bds_qzone" data-cmd="qzone"title="分享到QQ空间"></a>
                      <a href="#" class="bds_sqq" data-cmd="sqq" title="分享给QQ好友"></a>
                    </div>
                    <p class="fuzhi">
                      <input class="fizInfo" readonly="readonly" :value="locaAddress">
                      <button class="fuzhibtn">复制链接</button>
                    </p>
                  </div>
                </div>
              </div>
              <div class="left-icon" v-if="user.role===1">
                <a href="javascript:;" class="reply-btn" @click="reply_blur" v-show="reply_active">取消回复</a>

                <div href="javascript:;" class="liveManagement">
                  直播管理
                  <div class="liveManagementBox">
                    <a href="javascript:;" class="joinChannel-text" @click="$refs.joinChannel.visible=true">切换频道</a>
                    <a href="javascript:;" class="all-gossip-text" :class="{'jinyan':all_gossip_users_active}">
                      <span @click="all_gossip_users" v-show="!all_gossip_users_active">全体禁言</span>
                      <span @click="all_unblock_gossip" v-show="all_gossip_users_active">全体禁言</span>
                    </a>
                    <a href="javascript:;" class="announcement-text" @click="$refs.sendannouncement.visible=true">发公告</a>
                    <a href="javascript:;" class="announcement-box" @click="$refs.sendannouncementBox.visible=true">公告箱</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="chat-form" v-if="!reply_active">
              <textarea v-model="chatTxt" ref="chatTxt" @keydown.prevent.enter="sendChat" placeholder="快跟TA互动吧"></textarea>
              <button @click="sendChat">发 送</button>
            </div>

            <div class="chat-form reply-input" v-else>
              <div class="reply-input-left">
                <p>回复：{{reply_name}}</p>
                <input v-model="replyTxt" ref="replyTxt" @keydown.prevent.enter="send_reply"/>
              </div>
              <button @click="send_reply">发 送</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img class="fixgifImg" src="../static/getImg.gif" v-if="getImgVS" />
    <el-dialog
      :visible.sync="privateChatVisible"
      custom-class="private-chat"
      :lock-scroll="false">
      <ul class="pc-tab">
        <li v-for="(chat, index) in privateChat" :class="{active: selectPrivateChat === chat.key}"
            @click="selectPrivateChat = chat.key">
          <i class="el-icon-close" @click.stop="removePrivateChat(index)"></i>
          <p>{{chat.name}}</p> <em v-show="chat.not_num > 0">{{chat.not_num}}</em></li>
      </ul>
      <div class="pc-box">
        <div class="pc-item" :class="['pc-' + chat.key]" v-show="selectPrivateChat === chat.key"
             v-for="(chat, index) in privateChat">
          <!--userVip1体验卡,userVip2黄金,userVip3白金,userVip4钻石-->
          <p class="pc-header" :class="{userLv1: chat.role == '0', userKf: chat.role == '1', userVip1:Number(chat.vip_type)===1,userVip2:Number(chat.vip_type)===3,userVip3:Number(chat.vip_type)===4,userVip4:Number(chat.vip_type)===5}">
            {{chat.name}}</p>
          <ul class="pc-content chat-list">
            <!--userVip1体验卡,userVip2黄金,userVip3白金,userVip4钻石-->
            <li v-for="item in chat.chatList"
                :class="{userLv1: item.role == '0', userKf: item.role == '1', dialogueMine: item.visitor_id == user.visitor_id, userVip1:Number(item.vip_type)===1,userVip2:Number(item.vip_type)===3,userVip3:Number(item.vip_type)===4,userVip4:Number(item.vip_type)===5 }">
              <p class="dialogue-name">{{item.name}} <span>{{item.time}}</span></p>
              <div class="dialogue-con">
                <template v-if="item.image">
                  <div class="dialogue-txt cur-zoom" @click="$refs.fullImg.show(item.image)"><img
                    :src="item.image"></div>
                </template>
                <template v-else>
                  <div class="dialogue-txt" v-html="item.content"></div>
                </template>
              </div>
            </li>
          </ul>
          <div class="pc-tool">
            <Poptip placement="top-start" width="359" v-model="chat.face" style="float: left;">
              <a href="javascript:;" class="chat-face" title="表情符号"></a>
              <ul class="face-panel" slot="content">
                <li v-for="(value, key) in faceList" @click="choosePrivateFace(key, chat)"><img
                  :src="value" :title="key"></li>
              </ul>
            </Poptip>
            <el-upload
              class="avatar-uploader"
              action="http://up-z2.qiniu.com"
              :show-file-list="false"
              :on-success="privateHandleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :data="form" style="float: left;">
              <a href="javascript:;" class="chat-img" title="选择图片"></a>
            </el-upload>
          </div>
          <div class="pc-bottom">
            <textarea @keydown.prevent.enter="sendPrivateChat(chat)" v-model="chat.content"></textarea>
            <div class="pc-btns">
              <p>按Enter键发送消息</p>
              <button @click="sendPrivateChat(chat)">发送</button>
              <button @click="removePrivateChat(index)">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="图文库"
      :visible.sync="imgListVisible"
      custom-class="imgListLayer"
      :lock-scroll="false">
      <ul>
        <li v-for="img in imgList">
          <img :src="img.img" @click="imgListActive = img.id" :class="{active: imgListActive === img.id}">
          <p>{{img.text}}</p>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="imgListVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendImgListItem">发 送</el-button>
      </span>
    </el-dialog>
    <el-dialog title="通知" :lock-scroll="false" :visible.sync="noticeBool" customClass="noticeBox">
      <div class="info">
        <p>很抱歉，由于您选择的导师不再提供导师私聊服务，请您重新选择导师~</p>
      </div>
      <div class="allBtn">
        <a @click="noticeBool=false">我知道了</a>
      </div>
    </el-dialog>
    <audio id="audio" src="/video/tips_music01.mp3"/>
    <audio id="audioLH" src="/video/music.mp3" />
    <el-dialog customClass="channelLive" :visible.sync="channelVisible" :lock-scroll="false" :showClose="false" :closeOnClickModal="true">
      <i class="closeBtn" @click="channelVisible = false" ></i>
      <p class="title">请选择您的导师</p>
      <div class="channelLiveBox">
        <el-scrollbar style="height:100%">
          <ul class="channelLiveBoxUl">
            <li v-for="(item,index) in subscriptionListData">
              <i class="paiming" :class="item.i==1?'diyiM':item.i==2?'dierM':item.i==3?'disanM':''">{{item.i==1||item.i==2||item.i==3?'':item.i}}</i>
              <div class="info clearfix">
                <img :src="item.face"/>
                <div class="infoBox">
                  <p class="infoBoxName">{{item.big_coffee_name}}</p>
                  <p class="infoBoxKind">{{item.good_at}}</p>
                </div>
              </div>
              <span class="diyueL">{{item.push_num}}</span>
              <span class="dyBtn" @click="item.is_push==0?subscriptionEvn(item.big_coffee_id,index):''" :class="{yidyBtn:item.is_push==1}">{{item.is_push==0?"订阅":"已订阅"}}</span>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </el-dialog>

    <el-dialog title="微信设置" customClass="channelLiveWX" :lock-scroll="false" :visible.sync="weixSet">
      <p class="topInfo"><i></i>绑定微信</p>
      <img :src="user.weixin_qrcode">
      <p class="bottomInfo">扫一扫二维码，绑定公众号</p>
      <a @click="weixSet=false">已绑定并关注公众号</a>
    </el-dialog>

    <full-img ref="fullImg"/>
    <v-login ref="login"/>
    <v-prompting ref="prompting" :look-message="lookData"/>
    <v-pay ref="pay"/>
    <v-pointsmoney ref="pointsmoney" :checkList="checkList" @on-Today="signToday()"/>
    <v-openvip ref="openvip"/>
    <v-openvip ref="openvip"/>
    <v-classschedule ref="classschedule" :course="course"/>
    <v-imglibrary ref="imglibrary" :user="user" :imgList="imgList" @on-FullImg="onfulling_event"/>
    <v-strategysuggestion ref="strategysuggestion" />
    <v-pushsteps ref="pushSteps"/>
    <v-sendannouncement ref="sendannouncement" :visitor_id="user.visitor_id"/>
    <v-sendannouncementBox ref="sendannouncementBox" :visitor_id="user.visitor_id" :announcement_listData="announcement_list"/>
    <v-privateChatPower ref="privateChatPower" @add-chat-total="privateData.count++" @cancel-chat-total="chatTotal" />
    <v-joinChannel ref="joinChannel" :vv_config="vv_config" />
  </div>
</template>

<script>
  import reqwest from 'reqwest'
  import Collapse from 'iview/src/components/Collapse'
  import Poptip from 'iview/src/components/poptip'
  // import Scrollbar from 'smooth-scrollbar'
  // import 'element-ui/lib/theme-defaut/base.css'

  import 'swiper/dist/css/swiper.css'

  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  import 'element-ui/lib/theme-default/badge.css'

  import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'

  import _ from 'lodash'

  import fullImg from './component/full-img.vue'
  import login from './component/login/login.vue'
  import pay from './component/pay.vue' // 充值
  import OpenVip from './component/OpenVip' // 充值
  import PointsMoney from './component/PointsMoney' // 积分赚钱
  import ClassSchedule from './component/ClassSchedule' // 课程安排
  import ImgLibrary from './component/ImgLibrary' // 图文库
  import StrategySuggestion from './component/StrategySuggestion' // 老师观点弹窗
  import pushSteps from './component/pushSteps' // 推送弹窗
  import SendAnnouncement from './component/SendAnnouncement' // 发送公告
  import sendannouncementBox from './component/sendannouncementBox' // 公告箱
  import privateChatPower from './component/privateChatPower' // 私聊
  import joinChannel from './component/joinChannel' // 切换频道
  import prompting from './component/prompting/prompting.vue'
  import redEnvelope from './component/red-envelope/index.vue'
  import io from 'socket.io-client'

  export default {
    name: 'app',
    data () {
      return {
        getImgVS: false,
        switchvalue: '1',
        channelVisible: false,
        noticeBool: false,
        showRecharge: false,
        imgListVisible: false,
        teacher: {},
        showSlideBar: false,
        showContent: '',
        course: [],
        checkList: {},
        imgList: [],
        imgActive: '',
        imgListActive: '',
        dialogLoginVisible: false,
        giftInfo: {
          active: '',
          hover: '',
          list: [],
        },
        coffee_info: {},// 牛人信息
        temporary_users: [],// 临时用户
        chat_user_num_a: '',// 真实用户数量
        chat_user_num_z: '',// 真实用户在线数量
        chat_visitor_num_a: '',// 游客数量
        chat_visitor_num_z: '',// 游客真实在线人数
        now_class_list: [], // 当天课程信息
        now_class_list_active: 0, // 当天当前课程索引
        select_gift_type: '1', // 选择礼物送谁
        z_gossip_active: true, // 正式显示与不显示禁言人数按钮
        y_gossip_active: true, // 游客显示与不显示禁言人数按钮
        look_false_count: '', // 虚假聊天人数
        GiftVisible: false,
        qrCodVisible: false,
        all_gossip_users_active: false,
        replyTxt: '',
        reply_pid: '',
        reply_active: false,
        reply_name: '',
        login_message_list: [],
        swiperOption: {
          slidesPerView: 6,
          spaceBetween: 0,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        },
        announcement_top_active: false,
        live_box_btn_active: false,
        announcement_list:[], //公告列表
        announcement_text: {},
        privateRed: [],
        faceVisible: false,
        faceList: {},
        chatTxt: '',
        chatList: [],
        showUserList: 0,
        users: {},
        user: {userid: 0},
        customer: {},
        form: {},
        banner: {
          list: [],
          visible: true,
        },
        bannerList: '',
        redRadio: 'sendAll',
        privateChatVisible: false,
        selectPrivateChat: '',
        privateChat: [],
        chatScroll: true,
        imgBaseUrl: 'http://img.xilongfx.com/',
        videoType: 'VV',
        YYnum:'',
        listenInterval: null,
        LookInterval: null,
        LookBool: true,
        lookData: {},
        errorImg01: 'this.src="http://img.xilongfx.com/moren.png"',
        Ulmax: false,         //品种展开收起更多
        dataStrategys: '',
        loadBool: true,
        page_number: 2,
        dakaUser_id: '',   //筛选牛人ID
        breed_id: '',       //筛选品种ID
        dakaListData: '',
        dakaALL: 0,       //牛人筛选全部
        varietiesAll: 0,  //品种筛选全部
        counsel_listHave: false,   //观点列表
        redPointBool: false,     //今日观点红点展示
        updateData: '',    //更新观点信息
        noStrategy: true,  //显示暂无观点
        firstBool: false,        //第一条
        secondBool: false,  //第二条
        dakaNumBool: false,   //牛人<=8
        pinzhongLen: '',
        today_counsel_counts: 0,
        classInfo: {},
        screenWidth: document.body.clientWidth,
        gonggaoBool: false,
        privateData: {},
        shareTitle: '',
        subscriptionListData: [], //订阅列表
        weixSet: false, //微信设置
        locaAddress: '',
        vvCode: '',
        vv_config: [],
        gangugaoImg:{},
      }
    },
    created () {
      this.locaAddress = window.location.href
      this.$http.post('/index/beta_api/seo').then((res) => {
        if(res.code==1) {
          this.shareTitle = res.data.video.seo_title
          document.getElementById('titleId').innerHTML = this.shareTitle
          document.getElementsByName('keywords')[0].setAttribute('content',res.data.video.seo_keyword)
          document.getElementsByName('description')[0].setAttribute('content',res.data.video.seo_description)
        }
      })
      if (this.screenWidth <= 1440) {
        setTimeout(() => {
          this.live_box_btn_active = true
        }, 5000)
      }
      setTimeout(() => {
        this.banner.visible = false
      }, 20000)

      this.ListenUser()
      this.login_message_list_event()
      this.switchvalue = this.getCookie('setCookie')?this.getCookie('setCookie'):'1';
    },
    mounted () {
      const that = this
      //分享
      window._bd_share_config={
        "common":{
          "bdText": that.shareTitle,
          "bdPic":"",
          "bdUrl":that.locaAddress
        },
        "share":{},
      }
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
      document.body.appendChild(s);
      //复制
      $(document).on('click','.fuzhibtn',function (e) {
        var Url2=$(".fizInfo").select();
        document.execCommand("Copy"); // 执行浏览器复制命令
        that.$message('复制成功!')
      })
      this.getWebVideoInfo()
//       const socket = io('http://live.beta.xilongfx.com:2130')
      const socket = io('http://111.230.165.69:2130')  //测试
//       const socket = io('http://111.230.165.69:2120')  //正式
      // const socket = io('http://live.xilongfx.com:2120')
      // 后端推送来在线数据时
      var clearTime = ''
      socket.on('coffee_update_new_counsel', res => {
        let data = JSON.parse(res)
        this.chatList.push(data)
        if (data.counsel_type==3&&this.switchvalue==1) {
          if (!this.getImgVS) {
            this.getImgVS=true
            this.aplayAudioLH()
            setTimeout(() => {
              this.getImgVS=false
            }, 5000)
          }
        }
      })
      socket.on('private_chat_msg', data => {
        let res = JSON.parse(data)
        this.$refs.privateChatPower.pushMessage(res)
        if(res.user_id!=this.user.uid) {
          this.aplayAudio()
        }
      })
      //切换视频
      socket.on('change_vv_code', data => {
        let res = JSON.parse(data)
        if (res.video_id!=1) {
          return
        }
        this.vvCode = res.code
        setTimeout(function () {
          _vl_v._run()
        },200)
      })

      socket.on('close_urgent', data => {
        let res = JSON.parse(data)
        this.$refs.privateChatPower.remainCount(res)
      })

      socket.on('private_chat_notice_msg', data => {
        this.aplayAudio()
        let res = JSON.parse(data)
        this.$refs.privateChatPower.pushgonggao(res)
      })

      socket.on('web_video', data => {
        let res = JSON.parse(data)
        if (res.video_id==1) {
          that.getWebVideoInfo()
        }
      })
      socket.on('connect', () => {
        const that = this
        this.$http.post('/index/beta_api/getAll').then(data => {
          this.gangugaoImg = data.ad_img
          this.user = data.user_info
          this.announcement_list =data.notice_list
          this.vv_config = data.vv_config
          socket.emit('login', this.user.uid, this.user.group,'web','1')
          // this.chatList = data.chat_list

          this.announcement_list.forEach((item, index)=>{
            if(item.status==0) {
              this.gonggaoBool = true
            }
          })
          if (data.chat_list) {
            data.chat_list.map((chat) => {
              let chatContent = chat.content
              if (chatContent.indexOf("*http")!=-1) {
                chatContent = chatContent.split('*')
                let chatContents = ''
                chatContent.forEach((item, index) => {
                  let patt1 = new RegExp("http");
                  let result = patt1.test(item);
                  if (result) {
                    item = '<a class="buleClick" target="_blank" href="' + item + '">' + item + '</a>'
                  }
                  chatContents += item
                })
                that.$set(chat, `content`, chatContents)
              }
              if (Number(chat.chat_status) === 1) {
                that.chatList.push(chat)
              }
            })
          }

          this.$nextTick(() => {
            setTimeout(() => {
              that.scrollToBottom()
            }, 1200)
          })

          let userList = data.userList

          this.giftInfo.list = data.giftList

          this.imgList = data.imgList

          this.teacher = data.teacher

          this.banner.list = data.bannerList

          this.checkList = data.check_list

          this.privateRed = data.bagList

          this.customer = this.chat_user_list

          this.users = data.chat_user_list // 真实用户列表
          this.temporary_users = data.chat_visitor_list // 游客列表

          this.chat_user_num_a = data.chat_user_num_a // 真实用户数量
          this.chat_user_num_z = data.chat_user_num_z // 真实用户在线数量
          this.chat_visitor_num_a = data.chat_visitor_num_a // 游客数量
          this.chat_visitor_num_z = data.chat_visitor_num_z // 游客真实在线人数
          this.look_false_count = data.look_false_count // 虚假聊天人数
          this.coffee_info = data.coffee_info// 牛人信息
          this.now_class_list = data.now_class_list // 当天课程信息
          // this.$refs.strategysuggestion.coffee_info = data.coffee_info// 牛人信息

          let arr_now_class_list = []
          for (let x in data.now_class_list) {
            arr_now_class_list.push(data.now_class_list[x])
          }

          for (let i = 0; i < arr_now_class_list.length; i++) {
            if (Number(arr_now_class_list[i].if_line) === 2) {
              this.now_class_list_active = i
            }
          }

          setTimeout(() => {
            this.swiper.slideTo(this.now_class_list_active, 1000, false)
          }, 500)

          this.course = data.class_list
          if (data.listen) {
            this.startListen()
          }
        })
        this.$http.post('/index/purview/look').then((res) => {
          let data = JSON.parse(res)
          if (data.type) {
            this.lookData = data
            if (data.status !==4 && data.status !==5 && data.status !==6) {
              this.infoBox()
            }
            switch (data.status) {
              case 4:
              case 5:
              case 6:
                this.LookBool = false
                this.$refs.prompting.visibles = true
                this.infoBox()
                break
            }
          }
        })
        this.$http.post('/index/Privatechat/getPrivateChatConfig').then((data) => {
          if (data.code==1) {
            this.privateData = data.data
            if(data.data.stop_service==1) {
              this.noticeBool = true
              return
            } else if (data.data.stop_service==2) {
              this.$message.error('您的私聊服务被暂停，请联系客服')
              return
            }
            if (window.location.href.split("?")[1]) {
              if(window.location.href.split("=")[1]==1) {
                this.$refs.privateChatPower.initialPage(this.privateData)
              }
            }
          } else {
            this.$message.error(data.msg)
          }
        })
        this.purviewLook()
        this.videoOnline()
        this.getClassInfo()
        this.giveStrategy(this.dakaUser_id,this.breed_id,0,0)
      })

      socket.on('private_msg', msg => {
        let data = JSON.parse(msg)
        let privateChat = this.privateChat
        let chat = this.findPrivateChat(data.key)
        if (chat) {
          if (chat.key !== this.selectPrivateChat || this.privateChatVisible === true) {
            chat.not_num = ++chat.not_num
          }
          chat.chatList.push(data)
          this.scrollPrivateToBottom()
        } else {
          this.newPrivateChat(data, data.key)
        }
      })
      socket.on('new_msg', msg => {
        let data = JSON.parse(msg)
        if (data.video_id!=1) {
          return
        }
        let chatList = this.chatList
        let chatContent = data.content
        if (chatContent.indexOf("*http")!=-1) {
          chatContent = chatContent.split('*')
          let chatContents = ''
          chatContent.forEach((item,index)=>{
            let patt1 = new RegExp("http");
            let result = patt1.test(item);
            if(result) {
              item = '<a class="buleClick" target="_blank" href="'+item+'">'+item+'</a>'
            }
            chatContents+=item
          })
          this.$set(data, `content`, chatContents)
        }
        if (data.type === 'check') {
          for (let i = chatList.length - 1; i >= 0; i--) {
            console.log('new_msg6666666', data.chat_id)
            if (chatList[i].chat_id === data.chat_id) {
              if (Number(data.show) === 2) {
                chatList.splice(i, 1)
              } else {
                chatList[i].show = 1
                this.scrollToBottom()
              }
              break
            }
          }
        } else {
          if (Number(data.chat_status) === 1) {
            chatList.push(data)
          } else if (Number(data.chat_status) === 2) {
            if(Number(data.opera_type) === 0) {
              let announce = {}
              announce.content = data.content
              announce.create_time = data.date
              announce.id = data.notice_id
              announce.status = '0'
              this.announcement_list.unshift(announce)
              this.gonggaoBool = true
            } else if(Number(data.opera_type) === 1) {
              this.gonggaoBool = false
              this.announcement_list.forEach((item,index)=>{
                if (item.id ==data.notice_id) {
                  this.announcement_list.splice(index, 1)
                }
                if(this.announcement_list.length==1) {
                  if (item.status==0) {
                    this.gonggaoBool = true
                  }
                }
                if (item.status==0&&item.id !=data.notice_id) {
                  this.gonggaoBool = true
                }
              })
            } else if(Number(data.opera_type) === 2) {
              this.gonggaoBool = false
              this.announcement_list.forEach((item,index)=>{
                if (item.id ==data.notice_id) {
                  this.$set(this.announcement_list[index], `status`, '1')
                }
                if (item.status==0&&item.id !=data.notice_id) {
                  this.gonggaoBool = true
                }
              })
            } else if(Number(data.opera_type) === 3) {
              this.announcement_list.forEach((item,index)=>{
                if (item.id ==data.notice_id) {
                  this.$set(this.announcement_list[index], `status`, '0')
                  this.gonggaoBool = true
                }
              })
            }
          } else {

          }
        }
      })

      socket.on('login_msg', msg => {
        this.$nextTick(() => {
          if (JSON.parse(msg).video_id==1) {
            this.login_message_list.push(JSON.parse(msg))
          }
        })
      })

      socket.on('library_msg', msg => {
        msg = JSON.parse(msg)
        if (msg.video_id!=1) {
          return
        }
        let status = msg.status
        let imgList = this.imgList
        let {text, id, img} = msg
        let index = _.findIndex(imgList, img => img.id === id)
        switch (status) {
          case 'A':
            imgList.push({text, id, img})
            break
          case 'D':
            imgList.splice(index, 1)
            break
          case 'U':
            imgList[index].text = text
            break
        }
      })
      this.initFace()
    },
    computed: {
      hasNotSee () {
        return this.privateChat.some(chat => chat.not_num > 0)
      },
      swiper () {
        return this.$refs.mySwiper.swiper
      },
    },
    methods: {

      changeswitch () {
        if (this.switchvalue==1) {
          this.setCookie('setCookie',"1",30);
        } else {
          this.setCookie('setCookie',"0",30);
        }
      },

      gotoGuanD (counsel_id) {
        window.open('http://www.xilongfx.com/clzx?param=share_single&counsel_id='+counsel_id);
      },
      gotoGuangG (url) {
        window.open(url);
      },

      //订阅列表
      subscriptionList () {
        this.$http.post('/index/beta_api/livepushList').then((data) => {
          if (data.code==1) {
            this.channelVisible=true
            this.subscriptionListData=data.data
          }
        })
      },
      //订阅
      subscriptionEvn (id,index) {
        this.$http.post('/index/beta_api/addLivePush',{big_coffee_id:id}).then((data) => {
          if (data.code==2) {
            this.$refs.login.show(2)
          } else if (data.code==3) {
            this.weixSet = true
          } else if (data.code==1) {
            this.$message.success(data.msg)
            this.subscriptionListData[index].is_push = 1
            this.subscriptionListData[index].push_num = this.subscriptionListData[index].push_num*1+1
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      chatTotal (msg) {
        if (msg.count==-1) {
          this.privateData.count = 0
        } else {
          this.privateData.count -= msg.count
        }
      },
      aplayAudio () {
        const audio = document.getElementById('audio')
        audio.play()
      },
      aplayAudioLH () {
        const audioLH = document.getElementById('audioLH')
        audioLH.play()
      },
      //获得live类型
      getWebVideoInfo () {
        this.$http.post('/index/mobile/getWebVideoInfo').then((res) => {
          let data = JSON.parse(res)
          if (data.code==1) {
            this.videoType = data.data.type
            if(data.data.type=='VV') {
              this.vvCode = data.data.vv_code
              setTimeout(function () {
                _vl_v._run()
              },200)
            } else if (data.data.type=='YY') {
              this.YYnum ='http://yy.com/s/'+data.data.yynumber+'/yyscene.swf'
            }
          }
        })
      },
      bannerBtn () {
        this.banner.visible = !this.banner.visible
      },
      //获得课程信息
      getClassInfo () {
        this.$http.post('/index/beta_api/getNowCollegeData').then((res) => {
          if (res.code === 1) {
            this.classInfo = res.data
          }
        })
      },
      //打开观点模块
      showUser3 () {
        this.showUserList = 3
        this.redPointBool = false
        this.firstBool = false
        this.secondBool = false
        this.noStrategy = true
      },
      showUser2 () {
        if(!this.noStrategy) {
          this.showUserList = 3
          this.redPointBool = false
          this.firstBool = false
          this.secondBool = false
          this.noStrategy = true
        }
      },
      //展开追踪
      showTrack (index,clickBool) {
        let that = this
        this.dakaListData.forEach(function (value, indexs) {
          that.$set(that.dakaListData[indexs], 'is_click', false)
        })
        this.$set(this.dakaListData[index],'is_click',!clickBool)
      },
      //显示微信推送弹框
      pushShow () {
        if (this.user.if_login === 1) {
          this.$refs.pushSteps.user_id = this.user.uid
          this.$refs.pushSteps.visible = true
          this.$refs.pushSteps.total()
        } else {
          this.$refs.login.show(2)
        }
      },
      //是否弹出信息框
      infoBox () {
        this.$http.post('/index/beta_api/ifFram').then((res) => {
          if (res.code === 1) {
            if(res.data === 2) {
              this.$refs.strategysuggestion.visible = true
              this.$refs.strategysuggestion.getStrateg()
            }
          }
        })
      },
      //请求观点
      giveStrategy (coffee_id,breed_id,dakaALL,varietiesAll) {
        this.$http.post('/index/beta_api/getCounselList',{
          coffee_id:coffee_id,
          breed_id: breed_id
        }).then((data) => {
          this.dakaUser_id = coffee_id
          this.breed_id = breed_id
          this.dakaALL = dakaALL
          this.varietiesAll = varietiesAll
          if (data.code) {
            this.dataStrategys = data.data
            this.dakaListData = data.data.counsel_list.data
            this.counsel_listHave = data.data.counsel_list.is_have
            this.pinzhongLen = data.data.coffee_breed.length
            this.today_counsel_counts = data.data.today_counsel_count
            if (data.data.coffee_data.length > 8) {
              this.dakaNumBool = true
            }
          }
        })
      },
      //加载观点
      getMore () {
        this.loadBool = false
        this.$http.post('/index/beta_api/getNextCounseList',{
          page_number:this.page_number,
          coffee_id:this.dakaUser_id,
          breed_id: this.breed_id
        }).then((data) => {
          if (data.code) {
            if(data.data.counsel_list.length!==0) {
              this.loadBool = true
              let counsel_list = data.data.counsel_list
              for (let i = 0; i <= counsel_list.length - 1; i++) {
                this.dakaListData.push(counsel_list[i])
              }
              this.page_number++
            } else {
              this.loadBool = false
            }
          }
        })
      },
      getScroll () {
        this.box = this.$refs.ScrollBox
        let SH = this.box.scrollTop; // 滚动高度
        let LH = this.box.offsetHeight; // 可视高度
        let DH = this.$refs.strategyUlBox.offsetHeight; // 文档高度
        // 判断是否滚动到底部
        if(SH + LH >= DH - 20) {
          if (this.loadBool) {
            this.getMore()
          }
        }
      },
      gotoOpenVIP (num) {
        switch (num) {
          case 1:
            window.location.href = 'http://www.xilongfx.com/prompt/';
            break
          case 2:
            window.location.href = 'http://www.xilongfx.com/vipcard';
            break
          case 3:
            this.$refs.login.show(2)
            break
        }
      },
      startListen () {
        let params = {
          visitor_id: this.user.visitor_id,
        }
        this.listenInterval = setInterval(() => {
          this.$http.get('/index/beta_api/listen', params).then((data) => {
            if (data.status === 2) {
              clearInterval(this.listenInterval)
            }
          })
        }, 5 * 60 * 1000)
      },
      ListenUser () {
        let params = {
          visitor_id: this.user.visitor_id,
        }
        setInterval(() => {
          this.$http.post('/index/beta_api/lineUpdate', params).then((data) => {
          })
        }, 3 * 60 * 1000)
      },
//      listenChildMsg () {
//        this.LookBool = true;
//      },
      purviewLook () {
        this.LookInterval = setInterval(() => {
          this.$http.post('/index/purview/look').then((res) => {
            let data = JSON.parse(res)
            if (data.type) {
              this.lookData = data
              switch (data.status) {
                case 4:
                case 5:
                case 6:
                  this.LookBool = false
                  this.$refs.prompting.visibles = true
                  break
              }
            }
          })
        }, 60 * 1000)
      },
      //定时请求
      videoOnline () {
        setInterval(() => {
          this.$http.post('/index/beta_api/videoOnlineTime').then((res) => {})
        }, 300 * 1000)
      },
      login_message_list_event () {
        setInterval(() => {
          for (let i = 0; i < this.login_message_list.length; i++) {
            if (!this.login_message_list[i].show) {
              this.$set(this.login_message_list[i], `show`, 1)
              return false
            }
          }
        }, 5000)
      },
      showPay () {
        if (!this.notLogin()) {
          if (!this.notFormal()) {
            this.$refs.pay.showToggle()
          }
        }
      },
      reply_user (data, name) { // 切换聊天输入框
        this.reply_active = true
        this.reply_pid = data
        this.reply_name = name
        this.$nextTick(() => {
          this.$refs.replyTxt.focus()
        })
      },

      reply_blur () {
        this.replyTxt = ''
        this.reply_active = false
      },
      send_reply () { // 发送回复

        console.log('this.user.visitor_id', this.user.visitor_id)
        let content = this.replaceFace(this.replyTxt)
        if (!content) {
          this.$message.error('请输入内容!')
          return
        }
        let params = {
          visitor_id: this.user.visitor_id,
          content: content,
          pid: this.reply_pid,
        }
        this.$http.post('/index/beta_api/sendChat', params).then((res) => {
          this.replyTxt = ''
          this.reply_active = false
          if (Number(res.code) === 3) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })

      },
      showOpenVip () { // 开通Vip显示
        if (!this.notLogin()) {
          if (!this.notFormal()) {
            this.$refs.openvip.showToggle()
          }
        }
      },
      showPointsMoney () { // 积分赚钱显示
        this.$refs.pointsmoney.showToggle()
      },
      showClassSchedule () { // 课程安排显示
        this.$refs.classschedule.showToggle()
      },
      showImgLibrary () { // 图文库显示
        this.$refs.imglibrary.showToggle()
      },
      all_gossip_users (data, j) { // 禁言用户，不区分游客正式
        let params
        if (j === 1) {
          params = {
            visitor_id: data,
          }
        } else {
          params = {}
          this.all_gossip_users_active = true
        }
        this.$http.post('/index/beta_api/siteNoSpeak', params).then((res) => {
          if (Number(res.code) === 1) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      all_unblock_gossip () { // 取消所有单个用户禁言
        let params
        params = {}
        this.all_gossip_users_active = false
        this.$http.post('/index/beta_api/siteLiftedSpeak', params).then((res) => {
          if (Number(res.code) === 1) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      gossip_users (visitor_id, j_id) { // 禁言用户
        let params = {
          visitor_id: visitor_id,
          j_id: j_id,
        }
        this.$http.post('/index/beta_api/siteNoSpeak', params).then((res) => {
          if (Number(res.code) === 1) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          } else {
            this.$message.success(res.msg)
          }
          if (j_id === 1) {
            this.user_get_y_gossip_user(2)
          } else {
            this.other_get_y_gossip_user(2)
          }
        })
      },
      unblock_gossip (visitor_id, j_id) { // 解除禁言
        let params = {
          visitor_id: visitor_id,
          j_id: j_id,
        }
        this.$http.post('/index/beta_api/siteLiftedSpeak', params).then((res) => {
          if (Number(res.code) === 1) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          } else {
            this.$message.error(res.msg)
          }
          if (j_id === 1) {
            this.user_get_y_gossip_user(2)
          } else {
            this.other_get_y_gossip_user(2)
          }
        })
      },
      user_get_y_gossip_user (i) { //正式用户
        let if_all
        if (i === 1) {
          this.z_gossip_active = !this.z_gossip_active
        }
        if (this.z_gossip_active) {
          if_all = 1
        } else {
          if_all = 2
        }
        let params = {
          if_all: if_all,
        }
        this.$http.post('/index/beta_api/haveUser', params).then((res) => {
          this.users = res.data // 真实用户列表
        })
      },
      other_get_y_gossip_user (i) { //游客
        let if_all
        if (i === 1) {
          this.y_gossip_active = !this.y_gossip_active
        }
        if (this.y_gossip_active) {
          if_all = 1
        } else {
          if_all = 2
        }
        let params = {
          if_all: if_all,
        }
        this.$http.post('/index/beta_api/haveOther', params).then((res) => {
          this.temporary_users = res.data // 真实用户列表
        })
      },
      onfulling_event (img) {
        this.$refs.fullImg.show(img)
      },
      notFormal () {
        if (this.user.if_formal === 2) {
          this.$message('此功能仅正式会员可以使用，请点击首页顶部免费成为"正式会员”')
          return true
        }
      },
      initFace () {
        const face = [
          '[微笑]',
          '[嘻嘻]',
          '[哈哈]',
          '[可爱]',
          '[可怜]',
          '[挖鼻]',
          '[吃惊]',
          '[害羞]',
          '[挤眼]',
          '[闭嘴]',
          '[鄙视]',
          '[爱你]',
          '[泪]',
          '[偷笑]',
          '[亲亲]',
          '[生病]',
          '[太开心]',
          '[白眼]',
          '[右哼哼]',
          '[左哼哼]',
          '[嘘]',
          '[衰]',
          '[委屈]',
          '[吐]',
          '[哈欠]',
          '[抱抱]',
          '[怒]',
          '[疑问]',
          '[馋嘴]',
          '[拜拜]',
          '[思考]',
          '[汗]',
          '[困]',
          '[睡]',
          '[钱]',
          '[失望]',
          '[酷]',
          '[色]',
          '[哼]',
          '[鼓掌]',
          '[晕]',
          '[悲伤]',
          '[抓狂]',
          '[黑线]',
          '[阴险]',
          '[怒骂]',
          '[互粉]',
          '[心]',
          '[伤心]',
          '[猪头]',
          '[熊猫]',
          '[兔子]',
          '[ok]',
          '[耶]',
          '[good]',
          '[NO]',
          '[赞]',
          '[来]',
          '[弱]',
          '[草泥马]',
          '[神马]',
          '[囧]',
          '[浮云]',
          '[给力]',
          '[围观]',
          '[威武]',
          '[奥特曼]',
          '[礼物]',
          '[钟]',
          '[话筒]',
          '[蜡烛]',
          '[蛋糕]']
        let tempFace = {}
        for (let i = 0; i < face.length; i++) {
          if (~[10, 15, 23, 26, 55, 58].indexOf(i)) {
            continue
          }
          tempFace[face[i]] = `/static/img/face/${i}.gif`
        }
        this.faceList = tempFace
      },
      showSlideContent (name) {
        this.showSlideBar = true
        this.showContent = name
      },
      checkChat (chat, type) {
        let params = {
          chat_id: chat.chat_id,
          type: type,
        }
        this.$http.post('/index/beta_api/checkChat', params)
      },
      verifyChat (chat) {
        this.checkChat(chat)
      },
      atUser (name) {
        this.chatTxt += `@${name} `
        this.$refs.chatTxt.focus()
      },
      beforeAvatarUpload (file) {
        if (file.size / 1024 / 1024 > 2) {
          this.$message.error('上传图片大小不能超过 2MB!')
          return false
        }
        console.log(this.$http.get('/index/beta_api/uploadQiniu', {isFile: true}).then((data) => {
          this.form = {token: data}
        }))
        return this.$http.get('/index/beta_api/uploadQiniu', {isFile: true}).then((data) => {
          this.form = {token: data}
        })
      },
      handleAvatarSuccess (file) {
        let params = {
          visitor_id: this.user.visitor_id,
          image: file.key,
        }
        this.$http.post('/index/beta_api/sendChat', params).then(res => {
          this.chatTxt = ''
          if (Number(res.code) === 3) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      privateHandleAvatarSuccess (file) {
//        let content = `<img src='${this.imgBaseUrl + file.key}' />`
        let chat = this.findPrivateChat(this.selectPrivateChat)
        this.sendPrivateChatContent(chat, '', file.key)
      },
      handleImgListSuccess ({key}) {
        this.addImgList(key)
      },
      addImgList (key) {
        this.$http.post('/index/beta_api/uploadImg', {img: key, text: '点击修改描述'}).then((res) => {
          if (Number(res.code) === 1) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          }
        })
      },
      deleteImage () {
        let active = this.imgActive
        if (!active) {
          this.$message.error('请选择图片!')
          return
        }
        this.$http.post('/index/beta_api/delImg', {id: active})
      },
      changeImgTxt (img) {
        this.$http.post('/index/beta_api/updateImgText', {id: img.id, text: img.text})
      },
      chooseFace (key) {
        this.chatTxt += `face${key} `
        this.faceVisible = false
        this.$refs.chatTxt.focus()
      },
      choosePrivateFace (key, chat) {
        chat.content += `face${key} `
        chat.face = false
        document.querySelector(`.pc-${chat.key} textarea`).focus()
      },
      replaceFace (content) {
        return content.replace(/face\[([^\s\[\]]+?)\]/g, i => {
          let a = i.replace(/^face/g, '')
          return `<img alt="${a}" title="${a}" src="${this.faceList[a]}">`
        })
      },
      findPrivateChat (key) {
        return this.privateChat[_.findIndex(this.privateChat, chat => chat.key === key)]
      },
      sendChat () { // 发送消息
        console.log('this.user.visitor_id', this.user.visitor_id)
        let content = this.replaceFace(this.chatTxt)
        if (!content) {
          this.$message.error('请输入内容!')
          return
        }
        let params = {
          visitor_id: this.user.visitor_id,
          content: content,
        }
        this.$http.post('/index/beta_api/sendChat', params).then((res) => {
          this.chatTxt = ''
          if (Number(res.code) === 3) {
            this.$message({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      },
      sendPrivateChat (chat) {
        let content = this.replaceFace(chat.content)
        if (!content.trim()) {
          this.$message.error('请输入内容')
          return
        }
        this.sendPrivateChatContent(chat, content)
      },
      sendPrivateChatContent (chat, content, image = '') {
        this.$http.post('/index/beta_api/sendPrivateChat', {
          content: this.replaceFace(content),
          to: chat.uid,
          to_name: chat.name,
          image,
        }).then((data) => {
          data = JSON.parse(data.data)
          chat.content = ''
          chat.chatList.push(data)
          this.scrollPrivateToBottom()
        })
      },
      showPrivateChat () {
        if (this.privateChat.length === 0) {
          if (this.user.group === 'customer') {
            this.$message('还没有人找你哦!')
          } else {
            let customer = this.customer
            let key = Object.keys(customer)[0]
            if (key) {
              this.addPrivateChat(customer[key])
            } else {
              this.$message('当前没有客服在线!')
            }
          }
        } else {
          if (!this.selectPrivateChat)
            this.selectPrivateChat = this.privateChat[0].key
          this.privateChatVisible = true
        }
      },
      newPrivateChat (user, key) {
        let chat = {
          key,
          uid: user.uid,
          name: user.name,
          role: 1,
          chatList: [],
          content: '',
          face: false,
          page: 1,
          not_num: 1,
        }
        this.privateChat.push(chat)
        this.$http.post('/index/beta_api/getPrivateChat', {to: user.uid, page: 1}).then(({data}) => {
          chat.chatList = data.map(chat => JSON.parse(chat))
          this.scrollPrivateToBottom()
        })
      },
      addPrivateChat (user) {
        let privateChat = this.privateChat
        if (this.user.group === 'customer' && user.group === 'customer') {
          this.$message.error('客服不能找客服聊天')
          return
        }
        let key = `${this.user.uid}_${user.uid}`
        if (!privateChat.some((chat) => chat.key === key)) {
          this.newPrivateChat(user, key)
        }
        this.$nextTick(() => {
          this.privateChatVisible = true
          this.selectPrivateChat = key
        })
      },
      scrollPrivateChat (chat, e) {
        let page = chat.page
        if (page === -1) {
          return
        }
        let content = e.target
        console.log(content.scrollTop)
        if (content.scrollTop < 100) {
          this.$http.post('/index/beta_api/getPrivateChat', {to: chat.uid, page: ++page}).then(({data}) => {
            data.forEach(chatItem => {
              chat.chatList.unshift(JSON.parse(chatItem))
            })
          })
        }
      },
      removePrivateChat (index) {
        let privateChat = this.privateChat
        privateChat.splice(index, 1)
        if (privateChat.length === 0) {
          this.privateChatVisible = false
          this.selectPrivateChat = ''
          return
        }
        this.$nextTick(() => {
          this.selectPrivateChat = privateChat[0].key
        })
      },
      scrollToBottom () {
        if (!this.chatScroll) {
          return
        }
        this.$nextTick(() => {
          let list = this.$refs.chatList
          list.scrollTop = list.scrollHeight
        })
      },
      scrollPrivateToBottom () {
        this.$nextTick(() => {
          let content = document.querySelector(`.pc-${this.selectPrivateChat} .pc-content`)
          console.log(content)
          if (content) {
            content.scrollTop = content.scrollHeight
          }
        })
      },
      notLogin () { /*判断是否登录，否则返回false*/
        if (this.user.if_login === 2) {
          this.$refs.login.show(2)
          return true
        }
      },
      loginOut () {
        this.$http.post('/index/beta_api/logout').then(() => {window.location.reload()})
      },
      sendGift (giftId) {
        if (this.notLogin()) {
          return
        }
        if (this.notFormal()) {
          return
        }
        let id = giftId || this.giftInfo.active
        if (id === '') {
          this.$message.error('请选择礼物再进行赠送!')
          return
        }
        let params = {
          gift_id: id,
          visitor_id: this.user.visitor_id,
          j_id: Number(this.select_gift_type),
        }
        this.$http.post('/index/beta_api/sendChatGift', params).then(data => {
          this.GiftVisible = false
          if (Number(data.code) === 2) {
            this.$message.error(data.msg)
          }
          this.updateMoney(data.money)
        })
      },
      sendImgListItem () {
        let image = this.imgList[_.findIndex(this.imgList, img => img.id === this.imgListActive)].img.replace(
          this.imgBaseUrl, '')

        let params = {
          visitor_id: this.user.visitor_id,
          image: image,
        }
        this.$http.post('/index/beta_api/sendChat', params).then(() => {
          this.imgListVisible = false
        })
      },
      signToday () {
        if (this.notLogin()) {
          return
        }
        if (this.notFormal()) {
          return
        }
        this.$http.post('/index/beta_api/userCheckIn').then(() => {
          this.checkList[0].status = 1
        })
      },
      updateMoney (money) {
        isNaN(money) || (this.user.money = money)
      },
    },
    watch: {
      chatList () {
        this.scrollToBottom()
      },
      showRecharge () {
        let a = 1
        this.pay.price = 0
      },
      selectPrivateChat (newVal, oldVal) {
        let chat = this.findPrivateChat(newVal)
        if (chat) {
          chat.not_num = 0
        }
//        this.scrollPrivateToBottom()
//        let chat = this.findPrivateChat(oldVal)
//        chat || (chat.not_num = 0)
//        reqwest({
//          url: '/index/beta_api/ifJudgeRead'
//          , method: 'post'
//          , data: {new_key: newVal, old_key: oldVal}
//        })
      },
    },
    components: {
      'Panel': Collapse.Panel,
      Collapse,
      Poptip,
      fullImg,
      'v-login': login,
      'v-prompting': prompting,
      'v-pay': pay,
      'v-openvip': OpenVip,
      'v-pointsmoney': PointsMoney,
      'v-classschedule': ClassSchedule,
      'v-imglibrary': ImgLibrary,
      'v-strategysuggestion': StrategySuggestion,
      'v-pushsteps': pushSteps,
      'v-sendannouncement': SendAnnouncement,
      'v-sendannouncementBox': sendannouncementBox,
      'v-privateChatPower':privateChatPower,
      'el-collapse-transition': CollapseTransition,
      redEnvelope,
      swiper,
      swiperSlide,
      'v-joinChannel': joinChannel,
    },
  }
</script>
